<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
    <style>
        .huxi {
            /*这里使用了呼吸动画*/
            animation: glow 800ms ease-out infinite alternate;
            background: #f9f9f9;
            border-color: #F9F9F9;
            color: #2F4050;
            outline: none;
        }

        /*以下定义动画帧*/
        /*chrome*/
        @keyframes glow {
            0% {
                background: #1AB394;
                /*box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 ;*/
            }
            100% {
                background: #F9F9F9;
                /*box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 ;*/
            }
        }
    </style>
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>实时数据</h2>
                <ol class="breadcrumb">
                    <li>
                        消防用水管理系统
                    </li>
                    <li class="active">
                        实时数据
                    </li>
                </ol>
            </div>
        </div>
        <div class="wrapper wrapper-content">
            <div class="ibox-content">
                <div class="">
                    <table class="table table-striped table-bordered table-hover " id="realTimeTable" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>通道ID</th>
                            <th>区域</th>
                            <th>建筑物</th>
                            <th>楼层</th>
                            <th>主机名称</th>
                            <th>主机IP</th>
                            <th>通道类型</th>
                            <th>通道编号</th>
                            <th>通道数据</th>
                            <th>通道单位</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    <#include "./bottom_nav.ftl">
    </div>

</div>

<#include "./js.ftl">
<script>
    var ch_arr = [{ id: 0, text: '通道1' }, { id: 1, text: '通道2' }, { id: 2, text: '通道3' }, { id: 3, text: '通道4' }];
    var type_arr = [{ id: 0, text: '水位' }, { id: 1, text: '水压' }];
    var server = getURL() + "${baseURL}";
    $(function(){
        if ("WebSocket" in window)
        {
            var ws = new WebSocket("ws://"+ server +"/socketChannel");
            ws.onopen = function()
            {

            };
            ws.onmessage = function (evt)
            {
                var received_msg = evt.data;
                var data = JSON.parse(received_msg);
                var ip = data.ip;
                var v1 = data.v0;
                var v2 = data.v1;
                var v3 = data.v2;
                var v4 = data.v3;
                $('#IP'+ ip + "-" + '1').html(v1).parent().addClass("huxi");
                $('#IP'+ ip + "-" + '2').html(v2).parent().addClass("huxi");
                $('#IP'+ ip + "-" + '3').html(v3).parent().addClass("huxi");
                $('#IP'+ ip + "-" + '4 ').html(v4).parent().addClass("huxi");

                //todo 添加数据变化时css样式变化
            };
            ws.onclose = function()
            {
                console.log("Websocket Connection is closed...");
            };
            ws.onerror = function (err)
            {
                console.log(err);
            }
        }
        else
        {
            alert("你的浏览器不支持WebSocket,请更换高版本Chrome");
        }
    });

    var realTimeTable = $('#realTimeTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/water/channel/getAll2",
        columns:[
            {"data":"id"},
            {"data":"geo1"},
            {"data":"geo2"},
            {"data":"geo3"},
            {"data":"name"},
            {"data":"ip"},
            {"data":"type","render": function ( data, type, row, meta ){
                if(data === 0){
                    return '水位';
                }
                else {
                    return '水压';
                }
            }},
            {"data":"channel"},
            {"data":"data","render": function(data,type,row,meta){
                return '<i id="'+ data +'">0</i>';
            }},
            {"data":"unit"}
        ],
        destroy: true,
        aoColumnDefs: [ { "bSortable": false, "aTargets": [ 8 ] }]
    });

</script>
</body>
</html>